<template>
    <div>
      <h1>编辑车辆信息</h1>
      <form @submit.prevent="submitForm">
        <div>
          <label for="name">名称：</label>
          <input type="text" id="name" v-model="car.name" />
        </div>
        <div>
          <label for="price">价格：</label>
          <input type="text" id="price" v-model="car.price" />
        </div>
        <button type="submit">完成</button>
      </form>
    </div>
  </template>
  
  <script setup>
  import { defineProps, ref } from "vue";
  
  const props = defineProps({
    selectedCar: {
      type: Object,
      required: true,
    },
  });
  
  const car = ref({
    id: props.selectedCar.id,
    name: props.selectedCar.name,
    price: props.selectedCar.price,
  });
  </script>

<script>
import { defineEmits } from "vue";

const emits = defineEmits(["updateCar"]);

export default {
  name: "CarEdit",
  data() {
    return {
      car: {
        id: this.selectedCar.id,
        name: this.selectedCar.name,
        price: this.selectedCar.price,
      },
    };
  },
  methods: {
    submitForm() {
      emits.updateCar(this.car);
      this.$router.push({ name: "CarList" });
    },
  },
  props: {
    selectedCar: {
      type: Object,
      required: true,
    },
  },
};
</script>